<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<header>
    <div class="box">
        <ul>
            <li>这是li01</li>
            <li>这是li02</li>
            <li>这是li03</li>
            <li>这是li04</li>
            <li>这是li05</li>
        </ul>
    </div>
    <ul>
        <li>lili01</li>
        <li>lili02</li>
        <li>lili03</li>
        <li>lili04</li>
        <li>lili05</li>
    </ul>
</header>
<script>
    // 找到.box的后代元素li
    /*   $('.box').find('li').css({
          border: '1px solid red'
      });
  
      // 找到.box的直系子元素
      $('.box').children().css({
          border: '1px solid red'
      });
  
      $('.box').children('ul').css({
          border: '1px solid red'
      })
   */
    /*  // siblings() 找到所有兄弟元素
     $('.box').children('ul').children('li').eq(2).siblings().css({
         border: '1px solid blue'
     })
 
     // 下一个兄弟
     $('.box').children('ul').children('li').eq(2).next().css({
         border: '1px solid blue'
     })
 
     // 下面的所有兄弟元素
     $('.box').children('ul').children('li').eq(2).nextAll().css({
         border: '1px solid blue'
     }) */

    /*   // 上一个兄弟
      $('.box').children('ul').children('li').eq(2).prev().css({
          border: '1px solid blue'
      })
  
      // 上面所有兄弟
      $('.box').children('ul').children('li').eq(2), prevAll().css({
          border: '1px solid blue'
      })
   */
   /*  // 找到父标签
    $('.box').parent().css({
        border: '1px solid blue'
    })

    // 找到所有父级标签
    $('.box').parents().css({
        border: '1px solid blue'
    })
 */
    // 找到父级标签中的谁
    $('.box').parents('body').css({
        border: '1px solid blue'
    })

</script>

<body>

</body>

</html>